<template>
  <div class="flex flex_column">
    
    <!--彩稿订单 -->
    <el-dialog
      append-to-body
      title="数据导入"
      :visible.sync="isVisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog "
      width="35%"
    >
      <div class="p16 relative"  v-loading="loading">
        <div class="model" v-if="showResult">
          <el-result icon="success" title="上传成功" v-if="isSuccess">
            <template slot="extra">
              <el-button size="medium" @click="showResult=false">继续上传</el-button>
              <el-button type="primary" size="medium" @click="isVisible = false">关闭上传</el-button>
            </template>
          </el-result>
          <el-result icon="error" title="上传失败" v-else>
            <template slot="extra">
              <el-button type="primary" size="medium">重新上传</el-button>
            </template>
          </el-result>
        </div>
        <el-upload
          class="upload-demo"
          drag
          action="#"
          multiple
          :show-file-list="false"
          :http-request="myUpload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或者</div>
          <div class="el-upload__text mt6"><el-button type="primary" size="small">点击上传</el-button></div>
          <div class="el-upload__tip" slot="tip">
            <h3>格式要求</h3>
            <div class="mt8">1、支持Excel 2007及以上版本</div>
            <div class="mt8">2、为保证数据顺利导入,请下载&nbsp;<span style="color:#3f61f1;cursor: pointer;" @click="handleDownload">导入模板</span></div>
            <div class="mt8">3、文件大小不要超过4M,如太大请分批上传</div>
          </div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
  import { arraySort,formatDate } from "@/utils";
export default {
  name: "fileImport",
  props: {
    perVisible: {
      type: Boolean,
      required: false,
    },
  },
  data() {
    return {
      showResult:false,
      loading:false
    };
  },
  computed: {
    isVisible: {
      get() {
        return this.perVisible;
      },
      set(val) {
        this.$emit("update:perVisible", val);
      },
    },
  },
  created() {
    // this.MarterdialogShow()
  },
  mounted() {},
  methods: {
    // 上传文件
    myUpload(e) {
      this.loading = true
      let type = e.file.name.split('.')
      if(type[type.length-1] != 'xlsx' && type[type.length-1] != 'xls'){
        this.$message.warning('请上传excel类型文件')
        this.loading = false
        return
      }
      const file = e.file;
      var formData = new FormData();
      formData.append("file", file);
      this.$api.product.ImportKnifeVersion(formData).then((res) => {
        this.loading = false
        this.showResult = true
        this.$emit('upData',res)
        this.isSuccess = true
      }).catch((err)=>{
        this.isSuccess = false
        this.loading = false
      });
    },

    //下载模板
    handleDownload(){
      const elink = document.createElement("a");
      elink.download = '刀版导入模板.xlsx'; //下载文件名称,
      elink.style.display = "none";
      elink.href = './刀版导入模板.xlsx?version='+formatDate()
      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
    }
  },
};
</script>
  <style lang="scss" scoped>
  ::v-deep .bigDialog {
    height: 35% !important;
  }


  ::v-deep .el-upload-dragger{
    width: 100% !important;
  }

  ::v-deep .el-upload{
    width: 100% !important;
  }

  .model{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999999;
  }

  .relative{
    position: relative;
    
  }

</style>
  